import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Table,
  message,
  Row,
  Col,
  Select,
  Button,
  Input,
  DatePicker,
  Modal,
  InputNumber,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'dva/router';
import moment from 'moment';
import { getParamUrl, myMessage } from '../../utils/formatDataSource';
@connect(({ checkLessonManage3, administration3, classInfo3, loading }) => ({
  checkLessonManage:checkLessonManage3,
  administration: administration3,
  classInfo:classInfo3,
  loading: loading.models.tag,
}))
@Form.create()
class CheckLessonManage extends PureComponent {
  state = {
    checkVisible: false,
    selectedRowKeys: [],
    selectedRows: [],
    updateDateFrom: '',
    updateDateTo: '',
    wordName: '',
    type: null,
    pageNo: 1,
    subjectList: [],
    campusList: [],
    lessonChecks: [],
    currentLesson: {},
    defaultDateRange: [],
    queryDateFrom: '',
    queryDateTo: '',
    clockStudentList: [],
  };
  componentDidMount() {
    this.initLoad();
  }
  initLoad = () => {
    const { dispatch } = this.props;
    var params = { pageNo: 1 };
    this.loadData(params);
    dispatch({
      type: 'classInfo3/getSubjectList',
    }).then(() => {
      this.setState({
        subjectList: this.props.classInfo.subjectList,
      });
    });
    dispatch({
      type: 'administration3/getCampusList',
    }).then(() => {
      this.setState({
        campusList: this.props.administration.campusList,
      });
    });
  };
  searchByParam = () => {
    const { queryDateFrom, queryDateTo, campusId, subject } = this.state;
    const { form } = this.props;
    const params = {};
    if (queryDateFrom !== '') {
      params.lessonDateFrom = queryDateFrom;
    }
    if (queryDateTo !== '') {
      params.lessonDateTo = queryDateTo;
    }
    if (campusId) {
      params.campusId = campusId;
    }
    if (subject) {
      params.subject = subject;
    }
    params.teacherName = form.getFieldValue('teacherName');
    this.loadData(params);
  };
  pageSearch = params => {
    const { queryDateFrom, queryDateTo, campusId, subject, pageNo } = this.state;
    const { form } = this.props;
    params.lessonDateFrom = queryDateFrom;
    params.lessonDateTo = queryDateTo;
    params.teacherName = form.getFieldValue('teacherName');
    params.campusId = campusId;
    params.subject = subject;
    params.pageNo = pageNo;
    this.loadData(params);
  };
  loadData = params => {
    const { dispatch } = this.props;
    dispatch({
      type: 'checkLessonManage/getLessonCheckList',
      payload: params,
    }).then(() => {
      this.setState({
        lessonChecks: this.props.checkLessonManage.lessonChecks
      });
    });
  };

  campusSelect = e => {
    this.setState({
      campusId: e,
    });
  };

  subjectSelect = e => {
    this.setState({
      subject: e,
    });
  };
  getColumns = () => {
    return [
      {
        title: '课程时间',
        dataIndex: 'timeFrom',
        key: 'timeFrom',
        align: 'center',
      },
      {
        title: '科目',
        dataIndex: 'subjectName',
        key: 'subjectName',
        align: 'center',
      },
      {
        title: '老师',
        dataIndex: 'teacherName',
        key: 'teacherName',
        align: 'center',
      },
      {
        title: '班级',
        dataIndex: 'className',
        key: 'className',
        align: 'center',
      },
      {
        title: '学生缺勤',
        dataIndex: 'studentList',
        key: 'studentList',
        align: 'center',
        render: (item, record) => {
          var oocStu = '';
          for (var student of record.studentList) {
            oocStu += student.name + ',';
          }
          return oocStu;
        },
      },
      {
        title: '实际上课时间',
        dataIndex: 'actualTimeFrom',
        key: 'actualTimeFrom',
        align: 'center',
        render: (value, record) => {
          return (
            <span>
              {record.actualTimeFrom}-{record.actualTimeTo}
            </span>
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'statusName',
        key: 'statusName',
        align: 'center',
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: record => {
          return (
            <span>
              <a href="javascript:;" onClick={() => this.checkModalShow(record)}>
                修改
              </a>
            </span>
          );
        },
      },
    ];
  };
  updateLessonOk = () => {
    const { dispatch } = this.props;
    const { currentLesson, updateDateFrom, updateDateTo, clockStudentList } = this.state;
    dispatch({
      type: 'checkLessonManage/updateLessonCheck',
      payload: {
        lessonId: currentLesson.lessonId,
        timeFrom: moment(updateDateFrom).toDate(),
        timeTo: moment(updateDateTo).toDate(),
        classCheckVos: clockStudentList,
      },
    }).then(() => {
      const { updateLessonResponse } = this.props.checkLessonManage;
      if (updateLessonResponse && updateLessonResponse.data == 1) {
        myMessage.success('修改成功', 3);
        this.setState({ checkVisible: false });
        var params = {};

        this.pageSearch(params);
      } else {
        myMessage.error('修改失败', 3);
      }
    });
  };

  updateLessonCancel = () => {
    this.setState({ checkVisible: false });
  };

  checkModalShow = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'checkLessonManage/getClockStudentList',
      payload: 'lessonId=' + record.lessonId,
    }).then(() => {
      this.setState(
        {
          clockStudentList: this.props.checkLessonManage.clockStudentList,
          currentLesson: record,
        },
        () => {
          if (record.actualTimeFrom && record.actualTimeTo) {
            this.setState(
              {
                defaultDateRange: [moment(record.actualTimeFrom), moment(record.actualTimeTo)],
              },
              () => {
                this.setState({
                  checkVisible: true,
                });
              }
            );
          } else {
            this.setState(
              {
                defaultDateRange: [],
              },
              () => {
                this.setState({
                  checkVisible: true,
                });
              }
            );
          }
        }
      );
    });
  };

  checkSizeChange = e => {
    this.setState({ currentCheckSize: e });
  };
  tablePageChange = pageNo => {
    var param = {};
    param.pageNo = pageNo;
    this.setState(
      {
        pageNo: pageNo,
      },
      () => {
        this.pageSearch(param);
      }
    );
  };
  createDateChange = (date, dateString) => {
    if (date.length > 0) {
      this.setState(
        {
          updateDateFrom: date[0].toDate(),
          updateDateTo: date[1].toDate(),
        },
        () => {
          this.setState({
            defaultDateRange: date,
          });
        }
      );
    }
  };
  selectDateChange = (date, dateString) => {
    this.setState({
      queryDateFrom: dateString[0],
      queryDateTo: dateString[1],
    });
  };
  clockChange = (value, item, index) => {
    const { clockStudentList } = this.state;
    item.clock = value;
    var temp = [...clockStudentList];
    temp.splice(index, 1, item);
    this.setState({
      clockStudentList: temp,
    });
  };

  render() {
    const Option = Select.Option;
    const { RangePicker } = DatePicker;
    const FormItem = Form.Item;
    const { lessonChecks } = this.props.checkLessonManage;
    const { campusList } = this.props.administration;
    const { subjectList } = this.props.classInfo;
    const { getFieldDecorator } = this.props.form;
    return (
      <PageHeaderLayout>
        <Modal
          title="修改课程"
          visible={this.state.checkVisible}
          onOk={this.updateLessonOk}
          onCancel={this.updateLessonCancel}
        >
          <div>请修改上课时间：</div>
          <div>
            <RangePicker
              span={12}
              showTime
              value={this.state.defaultDateRange}
              format="YYYY-MM-DD HH:mm:ss"
              onChange={this.createDateChange}
            />
          </div>
          <div>修改学生上课情况：</div>
          <div>
            <Row>
              {this.state.clockStudentList.map((item, index) => (
                <Col key={index} span={8}>
                  <div>{item.studentName}</div>
                  <Select
                    defaultValue={item.clock}
                    onSelect={value => {
                      this.clockChange(value, item, index);
                    }}
                  >
                    <Option value={1}>正常</Option>
                    <Option value={2}>请假</Option>
                    <Option value={3}>旷课</Option>
                  </Select>
                </Col>
              ))}
            </Row>
          </div>
        </Modal>
        <Card bordered={false}>
          <Form span={24} layout="inline" onSubmit={this.searchByParam}>
            <FormItem>
              {getFieldDecorator('teacherName')(<Input placeholder="请输入老师名称" />)}
            </FormItem>
            <FormItem span={4}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </FormItem>
            <FormItem label="校区">
              <Select defaultValue="" style={{ width: 100 }} onSelect={this.campusSelect}>
                <Option value="">全部</Option>
                {campusList.map((item, index) => {
                  return (
                    <Option key={index} value={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </FormItem>
            <FormItem label="科目">
              <Select defaultValue="" style={{ width: 100 }} onSelect={this.subjectSelect}>
                <Option value="">全部</Option>
                {subjectList.map((item, index) => {
                  return (
                    <Option key={index} value={item.code}>
                      {item.msg}{' '}
                    </Option>
                  );
                })}
              </Select>
            </FormItem>
            <FormItem label="时间">
              <RangePicker onChange={this.selectDateChange} />
            </FormItem>
            <Table
              dataSource={lessonChecks.list}
              columns={this.getColumns()}
              pagination={{
                onChange: this.tablePageChange,
                current: this.state.pageNo,
                size: 10,
                total: lessonChecks.total,
                showTotal() {
                  return (
                    <span>
                      共 <a style={{ color: '#1893ab' }}>{lessonChecks.total}</a>{' '}
                    </span>
                  );
                },
              }}
            />
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default CheckLessonManage;
